<template>
  <div ref="chartRef" style="width:100%;height:100%"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
const ageGroups = ['18-29', '30-39', '40-49', '50-59', '60-69', '70+'];
const avgSteps = [8500, 8200, 7800, 7200, 6500, 5000]; // 示例数据
onMounted(() => {
  const chart = echarts.init(chartRef.value);
  chart.setOption({
    title: { text: '不同年龄段平均步数', left: 'center' },
    tooltip: {},
    xAxis: { type: 'category', data: ageGroups },
    yAxis: { type: 'value', name: '步数' },
    series: [{
      type: 'bar',
      data: avgSteps,
      itemStyle: {
        color: function(params) {
          const colors = [
            '#FF7CA8', // 深一点的粉色
            '#5B9BFF', // 深一点的蓝色
            '#FFD36E', // 柔和黄
            '#5ED6B3', // 柔和绿
            '#B98CFF', // 柔和紫
            '#FFB86E'  // 柔和橙
          ];
          return colors[params.dataIndex % colors.length];
        }
      }
    }]
  });
});
</script>
